<template>
	<view>
		<u-loading mode="circle" :show="lodaingShow"></u-loading>
		<view>
			<u-dropdown>
				<u-dropdown-item v-model="branch" :title="branchName" :options="branchOptions" @change="changeBranch"></u-dropdown-item>
				<u-dropdown-item v-model="role" :title="roleName" :options="roleOptions" @change="changeRole"></u-dropdown-item>
			</u-dropdown>
			<u-search placeholder="姓名或手机号" v-model="keyword" shape="round" @search="getUserListByNameOrPhone()" @custom="getUserListByNameOrPhone()" animation="true" @change="getUserListByNameOrPhone()"></u-search>
		</view>

		<view>
			<view class="item" v-for="(res, index) in userList" :key="res.id">
				<view class="top" @click="jumpToUpdate(res.token)">
					<view class="name">{{ res.realName }}</view>
					<view class="phone">{{ res.phone }}</view>
					<view class="tag" v-if="res.roleId=='2'">
						<text :class="{red: true}">{{ "管理员" }}</text>
					</view>
					<view class="tag" v-if="res.roleId=='1'">
						<text :class="{red: true}">{{ "超级" }}</text>
					</view>
					<view class="tag" v-if="res.roleId=='3'">
						<text :class="{orange: true}">{{ "教练" }}</text>
					</view>
					<view class="tag" v-if="res.roleId=='4'">
						<text :class="{orange: false}">{{ "用户" }}</text>
					</view>
				</view>
				<view class="bottom">
					{{res.campus}}
					<u-icon @click="handleUserDetails(res.token)" name="edit-pen" :size="40" color="#999999"></u-icon>
				</view>
			</view>
		</view>
		<u-toast ref="updateToast" />
	</view>
</template>

<script>
	import api from '../../utils/api.js'
	export default {
		data() {
			return {
				page: 1,
				pageSize: 20,
				totalPageNo: 0,
				total:0,
				lodaingShow: true,
				keyword: '',
				confirmUpdateModalShow: false,
				confirmTitle: "",
				index: '',
				users: [],
				branchName: '分校',
				roleName: '角色',
				branch: 1,
				role: 1,
				branchId: '0',
				roleId: '0',
				branchOptions: [{
					label: '全部',
					value: 0, 
					id: 0
				}],
				roleOptions: [{
					label: '全部',
					value: 0,
					id: 0
				}],
				userList: [],
				actionSheetShow: false, 
				selectUserId: '',
				selectRoleId: '',
				selectUserRealName: '',
			}
		},
		created() {
			this.lodaingShow = true;
			api.getBranchList().then((res) => {
				for (var i = 0; i < res.data.length; i++) {
					this.branchOptions.push({
						label: res.data[i].branchName,
						value: i + 1,
						id: res.data[i].id
					});
				}
			})
			api.getRoleList().then((res) => {
				for (var i = 0; i < res.data.length; i++) {
					var role = res.data[i];
					this.roleOptions.push({
						label: role.name,
						value: i + 1,
						id: role.id
					});
				}
			}),
			api.getAllUserInfoByBranchAndRole(this.branchId, this.roleId, this.page, this.pageSize).then((res) => {
				this.userList = res.data.list;
				this.lodaingShow = false;
				this.total = res.data.pageInfo.total
				this.totalPageNo = this.total % this.pageSize == 0 ? (this.total / this.pageSize) : (this.total / this.pageSize + 1)
			});
		},


		methods: {
			jumpToUpdate(userToken) {
				wx.navigateTo({
				  url: '/pages/m_set_manager/m_set_user_details?token=' + userToken,
					fail: function(res) {
						uni.showToast({
							title: "跳转失败",
							icon: "none"
						});
					}
				})
			},
			showUpdateToast() {
				this.$refs.updateToast.show({
					title: '修改成功',
					type: 'success',
					position: 'top',
					duration: 1000
				})
			},
			getUserList() {
				api.getAllUserInfoByBranchAndRole(this.branchId, this.roleId, 1, 20).then((res) => {
					this.userList = res.data.list;
					this.lodaingShow = false;
				});
			},
			getUserListByNameOrPhone() {
				this.lodaingShow = true
				api.getAllUserInfoByNameOrPhone(this.keyword).then((res) => {
					this.userList = res.data.list;
					this.lodaingShow = false;
				});
			},
			changeBranch(value) {
				this.lodaingShow = true
				this.branchName = this.branchOptions[value].label;
				this.branchId = this.branchOptions[value].id;
				this.getUserList()
			},
			changeRole(value) {
				this.lodaingShow = true
				this.roleName = this.roleOptions[value].label;
				this.roleId = this.roleOptions[value].id;
				this.getUserList()
			},
			updateCancel: function() {
			},
			handleUserDetails(token) {
				uni.navigateTo({
					url:`./m_set_user_details?token=${token}`
				})
			},
			showActionSheet: function(index) {
				this.actionSheetShow = true;
				this.selectUserId = this.userList[index].id;
				this.selectUserRealName = this.userList[index].realName;
			},
			actionSheetClick(index) {
				this.confirmUpdateModalShow = true;
				this.confirmTitle = '确定要设置 ' + this.selectUserRealName + ' 为 ' + this.actionSheetList[index].text;
				this.selectRoleId = this.actionSheetList[index].id;
			},
			isBottom() {
				//检查到是否到最底层
				let page = this.page
				let pageSize = this.pageSize
				let total = this.total
				console.log(this.total)
				if (page * pageSize < total) {
					return false
				}
				return true
			},
		},
		

		onReachBottom() {
			console.log(this.page)
			console.log(this.pageSize)
			if (this.isBottom()) {
				uni.showToast({
					title: "到底了",
					icon: "none"
				});
				return
			}
			wx.showLoading({
				title: '玩命加载中',
			})
			this.page += 1
			api.getAllUserInfoByBranchAndRole( //用来批量获取
				this.branchId,
				this.roleId,
				this.page,
				this.pageSize,
			).then(res => {
				if (res.code === 0) {
					this.userList = this.userList.concat(res.data.list)
				}
				wx.hideLoading()
			})
		},
	}
</script>

<style scoped lang="scss">
	.grid-text {
		font-size: 25rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	u-grid {
		height: 50px;
	}

	.item {
		padding: 40rpx 50rpx;

		.top {
			display: flex;
			font-weight: bold;
			font-size: 34rpx;

			.phone {
				margin-left: 60rpx;
			}

			.tag {
				display: flex;
				font-weight: normal;
				align-items: center;

				text {
					display: block;
					width: 60rpx;
					height: 34rpx;
					line-height: 34rpx;
					color: #ffffff;
					font-size: 20rpx;
					border-radius: 6rpx;
					text-align: center;
					margin-left: 30rpx;
					background-color: rgb(49, 145, 253);
				}

				.red {
					background-color: red
				}
				.orange {
					background-color: orange
				}
			}
		}

		.bottom {
			display: flex;
			margin-top: 20rpx;
			font-size: 28rpx;
			justify-content: space-between;
			color: #999999;
		}
	}

	.addSite {
		display: flex;
		justify-content: space-around;
		width: 600rpx;
		line-height: 100rpx;
		position: absolute;
		bottom: 30rpx;
		left: 80rpx;
		background-color: red;
		border-radius: 60rpx;
		font-size: 30rpx;

		.add {
			display: flex;
			align-items: center;
			color: #ffffff;

			.icon {
				margin-right: 10rpx;
			}
		}
	}
</style>
